Diciamo che ho qualcosa di simile in un file chiamato main.js:
funzione obj_name () {}
obj_name.prototype = {
foo: function () {alert ('hi!'); },
foo2: function () {alert ('ciao di nuovo!'); }
}
Ora sto provando in questo modo per espandere l'oggetto in un altro file extent.js:
obj_name.prototype = {
newfoo: function () {alert ('hi # 3'); }
}
... ma il problema è che funzionerà solo se lo codifico in questo modo:
obj_name.prototype.newfoo = function () {alert ('hi # 3'); }
Immagino che questa possa essere una domanda da noob. Non so nemmeno se questo sia il modo corretto per estendere un oggetto, ma sto andando fuori di testa a chiedermi perché questo accada.
Grazie ragazzi in anticipo.
2021-01-06 08:10:57
Nel primo modo, stai sostituendo il prototipo con uno nuovo (sovrascrivendo ciò che c'era prima). Nel secondo modo, stai aggiungendo un nuovo membro al prototipo (espandendolo così).
C'è un altro metodo: una libreria che ha un metodo di estensione o simile (che fondamentalmente avvolge ciò che stai facendo nella tua seconda forma in un bel wrapper). Ad esempio, in jQuery:
$ .extend (obj_name.prototype, {
newfoo: function () {alert ('hi # 3'); }
}
|
Un'altra opzione senza jQuery:
var extended = function (destinazione, sorgente)
{
for (proprietà var in source)
{
if (destinazione [proprietà] && (tipo di (destinazione [proprietà]) == 'oggetto')
&& (destinazione [proprietà] .toString () == '[oggetto Oggetto]') && origine [proprietà])
estendere (destinazione [proprietà], sorgente [proprietà]);
altro
destinazione [proprietà] = sorgente [proprietà];
}
destinazione di ritorno;
}
var a = {a: 'test'}; // originale
var b = {newFoo: function () {alert ('hi # 3'); }}; // l'addizione
estendere (a, b); // estendilo
a.newFoo (); // chiama la proprietà aggiunta
|
Questo perché sulla riga
obj_name.prototype = {
newfoo: function () {alert ('hi # 3'); }
}
crei un nuovo oggetto prototipo, eliminando i contenuti privi. È come se l'avessi detto
var a = {};
quando estendi un oggetto come
obj_name.prototype.newfoo = function () {alert ('hi # 3'); }
aggiunge semplicemente una nuova proprietà (newfoo) all'albero degli oggetti mantenendo intatti i contenuti esistenti. Ecco perché funziona
HTH
Ivo Stoykov
|
Se stai cercando una libreria semplice e leggera che ti dia esattamente questo: OOP "fatto bene" in javascript, dai un'occhiata a questo: https://github.com/haroldiedema/joii
Esempi di codice sorgente forniti nel file readme sulla pagina GitHub, così come questi link:
http://harold.info/projects/joii
http://haroldiedema.github.io/joii
Questa libreria fondamentalmente ti permette di definire "classi" come tali:
var Person = Class (function () {
this.firstname = "John"
this.surname = "Smith"
this.role = "Sviluppatore"
this.getInfo = function () {
return this.firstname + '' + this.surname + 'is' + this.role;
};
});
var AnotherPerson = Class ({extends: Person}, function () {
this.firstname = "Bob";
});
var p = new AnotherPerson ();
console.log (p.getInfo ());
// Bob Smith è lo sviluppatore
modificare
Per prendere il tuo codice come esempio ma trasformato in codice compatibile con JOII, sarebbe esattamente così:
var obj_name = Class (function () {
this.foo = function () {alert ('hi!'); };
this.foo2 = function () {alert ('hi again!'); };
};
var obj_name2 = Class ({extends: obj_name}, function () {
this.newfoo = function () {alert ('hi # 3'); };
});
var o = new obj_name2 ();
o.foo (); // Ciao!
o.newfoo (); // ciao # 3
Oppure usalo come mix-in:
var o = new obj_name ();
o.mixin (obj_name2);
o.newfoo (); // ciao # 3
O viceversa, usando un "tratto".
// l'opzione "uses" copia fondamentalmente il contenuto dall'oggetto dato allo scope della tua "classe", risolvendo il problema del riutilizzo del codice orizzontale.
var obj_name = Class ({utilizza: [obj_name2], function () {
this.foo = function () {alert ('hi!'); };
this.foo2 = function () {alert ('hi again!'); };
});
var o = new obj_name ();
o.newfoo (); // ciao # 3
|
la tua risposta
StackExchange.ifUsing ("editor", function () {
StackExchange.using ("externalEditor", function () {
StackExchange.using ("snippets", function () {
StackExchange.snippets.init ();
});
});
}, "frammenti di codice");
StackExchange.ready (function () {
var channelOptions = {
tag: "" .split (""),
id: "1"
};
initTagRenderer ("". split (""), "" .split (""), channelOptions);
StackExchange.using ("externalEditor", function () {
// Devo attivare l'editor dopo gli snippet, se gli snippet sono abilitati
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using ("snippets", function () {
createEditor ();
});
}
altro {
createEditor ();
}
});
function createEditor () {
StackExchange.prepareEditor ({
useStacksEditor: false,
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
suffisso: "",
imageUploader: {
brandingHtml: "Powered by \ u003ca href = \" https: //imgur.com/ \ "\ u003e \ u003csvg class = \" svg-icon \ "width = \" 50 \ "height = \" 18 \ "viewBox = \ "0 0 50 18 \" fill = \ "none \" xmlns = \ "http: //www.w3.org/2000/svg \" \ u003e \ u003cpath d = \ "M46.1709 9.17788C46.1709 8.26454 46.2665 7.94324 47.1084 7.58816C47.4091 7.46349 47.7169 7.36433 48.0099 7.26993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.61182C47.4335 4.62993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.61182C47.4335 4.62481 46.72543 4.9162889 464562 46.72543 4.9162889 4.645.2543 4.6531 4.69562 4.65.695.65.69562 C4562 4.6531.495.65.69562 C4562.65.695.6531.495.69562 C4562. 43.1481 6.59048V11.9512C43.1481 13.2535 43.6264 13.8962 44.6595 13.8962C45.6924 13.8962 46.1709 13.2535 46.1709 11.9512V9.17788Z \ "/ \ u003e \ u003cpath d = \" M32.492 10.1419C32.418 14.695.0 37439 C32.418 14.695.0 14.6954C32.418 14.695.0 14.6954 41.5985 12.6954 41.5985 10.1419V6.59049C41.59855.28821 41.1394 4.66232 40.1061 4.66232C39.0732 4.66232 38.5948 5.28821 38.5948 6.59049V9.60062C38.5948 10.8521 38.2696 11.5455 37.0451 11.5455C35.8209 11.5455 35.4954 10.8521 35.495.9 9.60062C38.5948 10.8521 38.2696 11.5455 37.0451 11.5455C35.8209 11.5455 35.4954 10.8521 35.495.9329.60062V6.590495.234.49562 4.60062V6.5904962 .1419Z \ "/ \ u003e \ u003cpath fill-rule = \" evenodd \ "clip-rule = \" evenodd \ "d = \" M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.4502 4.66231C28.9913 4.66231 28.4555 4.94978 28.1109 5.50789C27.499 4.86533 26.7335 4.56087 25.7005 4.56087C23.1369 4.56087 21.0134 6.57349 21.0134 9.22.52.390 1360134 9.22.390 1360134 9.22.390 1360134 9.22.390 12.6616C28.1109 12.7229 28.1161 12.7799 28.121 12.8346C28.1256 12.8854 28.1301 12.9342 28.1301 12.983C28.1301 14.4373 27.2502 15.2321 25.777 15.2321C24.8349 15.2321 24.1352 14.9821 23.52.723 2247.823 37 14.5218C21.7977 14.5218 21.2429 15.0123 21.2429 15.6887C21.2429 16.7375 22.9072 17.6335 25.6622 17.6335ZM24.1317 9.27932C24.1317 7.94324 24.9928 7.09766 26.1024 7.09766C27.2119 7.09766 1137.0918 7.96.524 27.2113 24.1317 10.6491 24.1317 9.27932Z \ "/ \ u003e \ u003cpath d = \" M16.8045 11.9512C16.8045 13.2535 17.2637 13.8962 18.2965 13.8962C19.3298 13.8962 19.8079 13.2535 19.8079 11.9512V8.12928C19.8087 4.628 4.628 4.628 4.659 4.628 4.628 4.659 4.628 4.628 4.659 4.628 4.628 4.628 4.628 4.659 4.628 4.628 4.628 4.659 4.628 4.628 4.629 14.279 4.98375 13.3609 5.88013C12.653 5.05154 11.6581 4.62866 10.3573 4.62866C9.34336 4.62866 8.57809 4.89931 7.9466 5.5079C7.58314 4.9328 7.10506 4.66232 6.51203 4.66232C5.47873 4.66232 13.00066 6.5784962 V20.59.89.95 13.77812.562 8.0232 13.2535 8.0232 11.9512V8.90741C8.0232 7.58817 8.44431 6.91179 9.53458 6.91179C10.5104 6.91179 10.893 7.58817 10.893 8.94108V11.9512C10.893 13.2535 11.3711 13.8962 12.4044 13.896 1 1.82471 4.66232C0.791758 4.66232 0.313354 5.28821 0.313354 6.59049V11.9512C0.313354 13.2535 0.791758 13.8962 1.82471 13.8962C2.85798 13.8962 3.31675 13.2535 3.31675 11.9512V6.59049Z \ "/ \ u003e \ u00300 0.40C 0 1.1159 0 1.98861C0 2.87869 0.822846 3.57676 1.87209 3.57676C2.90056 3.57676 3.7234 2.87869 3.7234 1.98861C3.7234 1.1159 2.90056 0.400291 1.87209 0.400291Z \ "fill = \" # 1BB76E \ "/ \ u003 \ u003 \ u003 \ u003 \ u003 \ u003 \ u003e ",
contentPolicyHtml: "Contributi utente concessi in licenza con \ u003ca href = \" https: //stackoverflow.com/help/licensing \ "\ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \" https://stackoverflow.com / legal / content-policy \ "\ u003e (content policy) \ u003c / a \ u003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
, immediatamenteShowMarkdownHelp: true, enableTables: true, enableSnippets: true
});
}
});
Grazie per aver contribuito con una risposta a Stack Overflow!
Assicurati di rispondere alla domanda. Fornisci dettagli e condividi la tua ricerca!
Ma evita ...
Chiedere aiuto, chiarimenti o rispondere ad altre risposte.
Fare dichiarazioni basate su opinioni; supportali con riferimenti o esperienza personale.
Per saperne di più, consulta i nostri suggerimenti su come scrivere ottime risposte.
Bozza salvata
Bozza scartata
Registrati o fai il login
StackExchange.ready (function () {
StackExchange.helpers.onClickDraftSave ('# login-link');
});
Registrati utilizzando Google
Iscriviti utilizzando Facebook
Iscriviti utilizzando e-mail e password
Invia
Pubblica come ospite
Nome
E-mail
Obbligatorio, ma mai mostrato
StackExchange.ready (
funzione () {
StackExchange.openid.initPostLogin ('. New-post-login', 'https% 3a% 2f% 2fstackoverflow.com% 2fquestions% 2f5975408% 2fhow-can-i-Extender-Proper-a-js-object% 23new-answer' , 'question_page');
}
);
Pubblica come ospite
Nome
E-mail
Obbligatorio, ma mai mostrato
Pubblica la tua risposta
Scartare
Facendo clic su "Pubblica la tua risposta", accetti i nostri termini di servizio, politica sulla privacy e politica sui cookie
Non è la risposta che stai cercando? Sfoglia altre domande etichettate javascript javascript-objects o fai la tua domanda.